<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>Title</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="header">
    <a href="pm2.html"><a href="index.html"><img class="iconfont" src="img/fh.svg"></a></a>
    <h1>列表详情</h1>
</header>
<div class="wrapmain">
    <div class="wrap-title">
        <span class="fl">基本信息</span>
        <!--<a href="javascript:;" class="fr">历史抽查</a>-->
    </div>
    <form action="" id="form" class="layui-form">
        <div class="ipt-item">
            <div class="layui-form-item">
                <label class="layui-form-label">住户姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="zhxm" lay-verify="required" autocomplete="off" placeholder="请扫描或或填写住户信息️" class="layui-input" id="zhxx" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="zxdh" lay-verify="required" autocomplete="off" placeholder="请填写电话信息" class="layui-input" id="lxdh" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">人口数</label>
                <div class="layui-input-block">
                    <input type="text" name="rks" lay-verify="required" autocomplete="off" placeholder="请填写人口数" class="layui-input" id="lxdh" disabled="disabled">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否已查</label>
                <div class="layui-input-block">
                    <input type="radio" name="sfyc" value="1" title="是" lay-filter="encrypt" >
                    <input type="radio" name="sfyc" value="0" title="否" lay-filter="encrypt" >
                </div>
            </div>
            <div class="layui-form-item layui-hide ccsj">
                <label class="layui-form-label">抽查时间</label>
                <div class="layui-input-block">
                    <input type="text" name="ccsj" autocomplete="off" placeholder="请填写抽查时间" class="layui-input" id="ccsj">
                </div>
            </div>
        </div>
        <div class="wrap-title">
            <span class="fl">评分</span>
        </div>
        <div class="ipt-item">
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">分类合理</label>
                <div class="layui-input-block">
                    <input type="radio" name="flhl" value="0" title="好">
                    <input type="radio" name="flhl" value="1" title="一般">
                    <input type="radio" name="flhl" value="2" title="较差">
                    <input type="radio" name="flhl" value="3" title="差">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">主动投放</label>
                <div class="layui-input-block">
                    <input type="radio" name="zdtf" value="0" title="好">
                    <input type="radio" name="zdtf" value="1" title="一般">
                    <input type="radio" name="zdtf" value="2" title="较差">
                    <input type="radio" name="zdtf" value="3" title="差">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">桶身清洁</label>
                <div class="layui-input-block">
                    <input type="radio" name="tsqj" value="0" title="好">
                    <input type="radio" name="tsqj" value="1" title="一般">
                    <input type="radio" name="tsqj" value="2" title="较差">
                    <input type="radio" name="tsqj" value="3" title="差">
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">周边环境</label>
                <div class="layui-input-block">
                    <input type="radio" name="zbhj" value="0" title="好">
                    <input type="radio" name="zbhj" value="1" title="一般">
                    <input type="radio" name="zbhj" value="2" title="较差">
                    <input type="radio" name="zbhj" value="3" title="差">
                </div>
            </div>


            <div class="layui-form-item" pane="">
                <label class="layui-form-label">是否空桶</label>
                <div class="layui-input-block">
                    <input type="radio" name="sfkt" value="1" title="是">
                    <input type="radio" name="sfkt" value="0" title="否">
                </div>
            </div>
        </div>
        <div class="wrap-title">
            <span class="fl">图片信息</span>
        </div>
        <div class="ipt-item">
            <div class="layui-form-item layui-form-text">
                <div class="layui-input-block" style="margin:0">
                    <textarea placeholder="添加文字描述或上传图片" class="layui-textarea" name="ms" disabled="disabled"></textarea>
                </div>
            </div>
            <div class="layui-upload" style="margin:0">
                <div class="layui-upload-list">
                </div>
            </div>

        </div>
    </form>
</div>
<div id="main" style="width:100%;height:210px;"></div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script src="http://www.jq22.com/demo/jquery-xxdf20161120/js/more-starts.js"></script>
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/grobal.js"></script>
<script type="text/javascript" src="js/detail.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '住户近期考核情况',
            textStyle:{
                verticalAlign:'middle',
                align:'center',

            },
            left:"100px"
        },
        tooltip: {
            trigger: 'axis', //触发类型。[ default: 'item' ] :数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用;'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
            axisPointer: {
                lineStyle: {
                    color: '#57617B'
                }
            }
        },
        legend: {
            show:false
        },
        grid: {
            left: '3%', //grid 组件离容器左侧的距离。
            right: '4%', //grid 组件离容器右侧的距离。
            bottom: '3%', //grid 组件离容器下侧的距离。
            containLabel: true //grid 区域是否包含坐标轴的刻度标签[ default: false ]
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
            axisLine: {
                lineStyle: {
                    color: '#57617B' //坐标轴线线的颜色。
                }
            },
            data: ['9-1', '9-2', '9-3', '9-4', '9-5', '9-6', '9-7', '9-8', '9-9', '9-10', '9-11', '1-12','9-13', '9-14', '9-15', '9-16', '9-17', '9-18', '9-19', '9-20', '9-21', '9-22', '9-23', '9-24']
        }],
        yAxis: [{
            type: 'value', //坐标轴类型。'value' 数值轴，适用于连续数据;'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据;'time' 时间轴;'log' 对数轴.
            name: '评分量', //坐标轴名称。
            axisTick: {
                show: false //是否显示坐标轴刻度
            },
            axisLine: {
                lineStyle: {
                    color: '#57617B' //坐标轴线线的颜色
                }
            },
            axisLabel: {
                margin: 10, //刻度标签与轴线之间的距离
                textStyle: {
                    fontSize: 14 //文字的字体大小
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#57617B' //分隔线颜色设置
                }
            }
        }],
        series: [{
            name: '月评分', //系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
            type: 'line',
            smooth: true, //是否平滑曲线显示
            symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            symbolSize: 5, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
            showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
            lineStyle: { //线条样式
                normal: {
                    width: 1 //线宽。[ default: 2 ]
                }
            },
            areaStyle: { //区域填充样式
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //填充的颜色。
                        offset: 0, // 0% 处的颜色
                        color: 'rgba(137, 189, 27, 0.3)'
                    }, {
                        offset: 0.8, // 80% 处的颜色
                        color: 'rgba(137, 189, 27, 0)'
                    }], false),
                    shadowColor: 'rgba(0, 0, 0, 0.1)', //阴影颜色。支持的格式同color
                    shadowBlur: 10 //图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
                }
            },
            itemStyle: { //折线拐点标志的样式
                normal: {
                    color: 'rgb(137,189,27)',
                    borderColor: 'rgba(137,189,2,0.27)', //图形的描边颜色。支持的格式同 color
                    borderWidth: 12 //描边线宽。为 0 时无描边。[ default: 0 ]

                }
            },
            data: [5, 4.8, 4.5, 4.6, 5, 4.8, 4.1, 4.8, 4.9, 4.6, 4.5, 4.7,5, 4.8, 4.5, 4.6, 5, 4.8, 4.1, 4.8, 4.9, 4.6, 4.5, 4.7]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</html>